<template>
  <div class="book-list">
    <h2>所有书籍列表</h2>
    <book-card :books="currentBookList"></book-card>

    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="bookList.length"
        @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
import {books} from "@/assets/data/booksData";
import BookCard from "@/components/Bookcard.vue";

export default {
  name: 'AllBookList',
  components: {
    BookCard,
  },

  data() {
    return {
      bookList: books,
      currentPage: 1,
      pageSize: 10,
    };
  },

  computed: {
    currentBookList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.bookList.slice(start, end);
    },
  },

  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

